Complaint Box App Implementation Using React Native

Abstract

This paper presents the implementation of a complaint box app using React Native, a cross-platform mobile app development framework. The app allows users to submit complaints and suggestions, while the admin panel enables complaint handlers to manage complaints and communicate with users. The app features user authentication, complaint submission, complaint tracking, and real-time communication, while the implementation involved designing the user interface, integrating it with a backend system and a database, and testing its functionality. The paper discusses the benefits and challenges of using React Native for mobile app development and how it can be leveraged to build scalable and efficient complaint box apps. Overall, this paper presents a practical and effective approach to implementing a complaint box app using React Native with an admin panel, which can help organizations capture user feedback and improve their products and services.

Introduction

I. INTRODUCTION

We In today's highly competitive world, customer satisfaction is crucial for the success of any organization. One of the most effective ways to gauge customer satisfaction is through feedback, particularly in the form of complaints and suggestions. This paper presents the design and implementation of a complaint box app using React Native, a popular cross-platform mobile app development framework. The app not only allows users to submit complaints and suggestions but also provides an admin panel for complaint handlers to manage complaints and communicate with users. The app's features include user authentication, complaint submission, complaint tracking, and real-time communication, while the implementation involved designing the user interface, integrating it with a backend system and a database, and testing its functionality. The paper also discusses the benefits and challenges of using React Native for mobile app development and how it can be leveraged to build scalable and efficient complaint box apps. Overall, this paper presents a practical and effective approach to implementing a complaint box app using React Native with an admin panel, which can help organizations capture user feedback and improve their products and services.

II. OVERVIEW

This paper presents the implementation of a complaint box app using React Native, a cross-platform mobile app development framework. The app is designed to allow users to submit complaints and suggestions, while the admin panel provides complaint handlers with the ability to manage complaints and communicate with users. The app's features include user authentication, complaint submission, complaint tracking, and real-time communication between users and complaint handlers. The implementation process involved designing the app's user interface, integrating it with a backend system and a database to store complaint data, and testing its functionality. The paper also discusses the benefits and challenges of using React Native for mobile app development, including its efficiency, scalability, and cross-platform compatibility. The use of React Native to develop complaint box apps is a practical and effective approach that can help organizations capture valuable user feedback and improve their products and services.

III. IMPLEMENTATION

The implementation of the complaint box app using React Native involved several steps, including designing the user interface, integrating it with Firebase as the backend system, and testing its functionality. To create an easy-to-use and intuitive user interface, we focused on a simple and minimalist design using React Native's built-in components such as Text, Text Input, and Button. The app's main screen featured a header with a logo, a button to submit a complaint, and a list of previously submitted complaints. User authentication was included to ensure that only registered users could submit complaints. Firebase Authentication was used to handle user authentication. For the backend integration, Firebase was used as the backend system to store complaint data and handle user authentication. Firebase Cloud Firestore was used to store complaint data, while Firebase Authentication was used to handle user authentication. Firebase Cloud Functions were used to trigger email notifications to complaint handlers when a user submitted a new complaint. The admin panel was also implemented using Firebase as the backend system, which allowed complaint handlers to view all submitted complaints, mark them as resolved, and communicate with users regarding their complaints. Firebase Real time Database powered the messaging feature, which provided real-time communication between users and complaint handlers. The use of Firebase as the backend system and an admin panel made the implementation process smoother and more efficient. The use of React Native, coupled with Firebase, allowed for the creation of a scalable and efficient complaint box app with an easy-to-use UI and an admin panel that allowed for efficient management of complaints.

IV. USER INTERFACE

The implementation of the complaint box app using React Native involved several steps, including designing the user interface, integrating it with Firebase as the backend system, and testing its functionality. We paid special attention to the user interface design to make it easy to use and intuitive.

The login page included fields for Name, Email, and Password for users to sign in. However, before signing up, users needed to verify their phone number using OTP verification. We included OTP verification to ensure that users were legitimate and to prevent spam accounts.Once the user enters their Name, Email, and Password, an OTP verification code is sent to their phone number. The user then needs to enter this code on the login page to complete the verification process. After successful OTP verification, the user can sign up and create an account.To ensure that the login page was user-friendly and accessible, we used React Native's built-in components such as Text, TextInput, and Button to create a simple and minimalist design. The color scheme used for the login page was consistent with the rest of the app, and we made sure to use a font size and style that was legible and readable.

The home page of the complaint box app was a crucial part of the user interface and provided users with access to several essential features, including Complaint, VoterID, Blog, and Chat. The home page's design and functionality were critical in ensuring that users could navigate the app easily and find the information they needed quickly.

The Complaint feature allowed users to submit their complaints easily. The user could access the complaint feature from the home page and fill out a form with clear labels and input fields. We included a feature to attach images to the complaint to provide additional context. This feature was essential in ensuring that users could report issues and problems in their area easily.

The VoterID feature was designed to allow users to find voter details by name. Users could access this feature from the home page and enter a name in the search field to find the voter's details. This feature was important in ensuring that users could access voter information easily and quickly.

The Blog feature provided users with access to the latest news and updates about Sameer Jawalkar, the Vice President of Pimpri-Chinchwad City. Users could access this feature from the home page and read about the latest activities and initiatives in their area.

The Chat feature allowed users to communicate with the app's admin section. Users could access this feature from the home page and ask any questions or raise any concerns they had about the app or the issues in their area. The chat feature was designed to be user-friendly and intuitive, with clear labels and easy-to-use input fields.

Overall, our focus on creating a simple and easy-to-use home page resulted in an app that was user-friendly and accessible to a wide Range of users. The home page's design and functionality were critical in ensuring that users could navigate the app easily and find the information they needed quickly.

Users to edit their profile details easily. The page allowed users to edit their name, address, email, and city details. However, since the mobile number was verified during the signup process, it was not editable.

To create a user-friendly profile page, we used React Native's built-in components such as Text, TextInput, and Button to create a simple and minimalist design. We made sure to use a font size and style that was legible and readable. The color scheme used for the profile page was consistent with the rest of the app, and we added clear labels to the input fields to ensure that users knew what information was required.

Users could access the profile page by clicking on the profile icon on the home page. Once on the profile page, the user could easily edit their details by typing in the appropriate input fields. We added a "Save" button at the bottom of the page, which allowed users to save their changes.

To ensure that users could access their profile details easily, we added a feature to display the user's name and profile picture on the top of the profile page. This feature allowed users to quickly verify that they were on the correct page and made it easy to access their profile details. Overall, our focus on creating a simple and easy-to-use profile page resulted in an app that was user-friendly and accessible to a wide range of users. The profile page's design and functionality were critical in ensuring that users could edit their details easily and efficiently.

V. MULTIPLICATION LANGUAGE SUPPORT

To make the complaint box app accessible to a wider audience, we added a feature that allowed users to change the language of the app. We incorporated multiple languages, including Hindi, Marathi, and English, to cater to the diverse linguistic needs of users in the Pimpri-Chinchwad area.

To implement this feature, we used the React Native localization library. This library allowed us to define translations for each of the languages we wanted to support. We created a file for each language that contained the translated strings for the app's text elements. When the user changed the language setting, the app loaded the corresponding file, and all the text in the app was displayed in the selected language.

To make it easy for users to change the language, we added a language selection option in the settings section of the app. Users could choose their preferred language by selecting it from a drop-down menu. Once they selected a language, the app immediately switched to the chosen language.

The multiple language support feature was critical in ensuring that the complaint box app was accessible to all users, regardless of their preferred language. This feature was especially important in a diverse community like Pimpri-Chinchwad, where multiple languages are spoken. By incorporating multiple languages, we were able to create an app that was inclusive and user-friendly.

VI.  ADMIN SIDE

The admin app was an essential part of the complaint box app's implementation. The admin app allowed the admin team to manage all aspects of the app, including complaints, blogs, and user profiles. This feature ensured that the app's data was well-organized and easy to manage.

To create the admin app, we used Firebase's Realtime Database to store the app's data. We set up a separate database for the admin app, which allowed the admin team to access and manage the app's data. We also created a web-based admin panel that allowed the admin team to access the admin app's features.

The admin app had several features that allowed the admin team to manage the app's data. The team could view and manage all the complaints submitted by users through the app. They could also manage the blogs section by adding new blog posts or modifying existing ones. Additionally, the team could edit user profiles, including their name, address, email, and city details. The admin app also had features to view user statistics and app usage data, which allowed the team to track the app's performance.

To ensure that the admin app was easy to use, we focused on creating a simple and intuitive user interface. The admin panel was designed to be user-friendly, with clear navigation and easy-to-understand features. We used React Native's built-in components to create a clean and minimalist design that was easy to navigate.

Overall, the admin app was an essential part of the complaint box app's implementation. It allowed the admin team to manage all aspects of the app, ensuring that the data was well-organized and easy to manage. The admin app's features ensured that the app was up-to-date and user-friendly, which was critical in creating an app that was accessible to a wide range of users.

References

[1] Thivanon Kansuwan, Thawatchai chomaski: Authentication Model using the Bundled CAPTCHA OTP Instead of Traditional Password 2019,IEEE. [2] Kewal shah, Harsh Sinha, Payal mishra : Analysis of Cross-Platform Mobile App Development Tools,2019 IEEE. [3] Feyzullah Kalyoncu, Engin Zeydan, Ibrahim Onuralp Yigit, and Ahmet Yildirim : A Customer ComplaintAnalysis Tool for Mobile Network Operators,2018 IEEE [4] Anik Hanifatul Azizah, Siti Zuliatul Faidah, Muhammad Bahrul Ulum, Putri Handayani : Exploration of React Native Framework in designing a Rule-Based Application for healthy lifestyle education,2021 IEEE. [5] Shpetim Kadrija, Agon Memeti, Shkurte Luma-Osmani : Development of mobile app through React Native hybrid framework,2022 IEEE. [6] Shaymaa Sayed El-Kaliouby, Sahar Selim, Ahmed H. Yourself: Native Mobile Applications UI Code Conversion,2021 IEEE. [7] Hugo Brito, Álvaro Santos, Jorge Bernardino, Anabela Gomes : Learning analysis of mobile JavaScript frameworks,2019 IEEE. [8] Andre Julian Irawan, Fenina Adline Twince Tobing, Eunike Endariahna Surbakti : Implementation of Gamification Octalysis Method at Design and Build a React Native Framework Learning Application,2021 IEEE. [9] AnshulVarshav Borawake, Minal Shahakar : Embankment Protection - React Native Application Cross-Platform Application for protection of embankments by crowd sourced data,2022 IEEE. [10] Xingwei Zhou, Wenshan Hu, Guo-Ping Liu : React-Native Based Mobile App for Online Experimentation,2020 IEEE. [11] Kamal Kishore, Shanu Khare, Vaibhav Uniyal, Sahil Verma : Performance and stability Comparison of React and Flutter: Cross-platform Application Development,2023 IEEE. [12] Hugo Brito, Álvaro Santos, Jorge Bernardino. Anabela Gomes : Mobile development in Swift, Java and React Native: an experimental evaluation in audioguides,2019 IEEE. [13] Prof. Anjali S. More,sanket sable,vaibhav balghare : Complaint Box Using Cross Platform Development,2023 IJARESM.

Copyright

Copyright © 2023 Sanket Sabale, Vaibhav Balghare, Prof. Anjali S. More. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.